<template>
    <div>
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="line-height:20px">
            <el-form-item prop="resource" v-for="(fvr, index) in flavor" :key="index" :label="fvr">
                <el-radio-group v-model="ruleForm.keepVal[index]">
                    <el-radio v-for="(v, idx) in val[index]" :key="idx" :label="v"></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sure">确 定</el-button>
        </span>
    </div>
</template>
<script>
export default {
    name: 'chooseFlavor',
    props: ['flavorName', 'value'],
    watch: {
        flavorName: {
            handler: function (newVal) {
                this.flavor = newVal.split(";")
                for (let i = 0; i < this.flavor; i++) {
                    ruleForm.keepVal.push('0')
                }

            },
            immediate: true,
            deep: true
        },
        value: {
            handler: function (newVal) {
                let v = newVal.split(";")
                for (let i = 0; i < v.length; i++) {
                    this.val.push(v[i].split(","))
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {

    },
    data() {
        return {
            flavor: [],
            val: [],
            ruleForm: {
                keepVal: []
            },
            dialogVisible: true

        }
    },
    methods: {
        cancel() {
            this.$emit('change',[false])
        },
        sure() {
            let subs = ''
            for(let i = 0 ; i < this.ruleForm.keepVal.length; i++){
                subs += (this.ruleForm.keepVal[i]+',')
            }
            subs = subs.substring(0,subs.length-1)
            this.$emit('change',[subs,false])
        }
    },
}
</script>